<!--vue模板-->
<template>
  <div class="common-layout hgt">
    <el-container class="hgt">
      <!--头部导航 -->
      <el-header class="header"> 
         <top-nav></top-nav>
      </el-header>


      <el-container class="hgt">
        <!--左侧导航-->
        <el-aside width="200px" class="leftnav">
          <left-nav></left-nav>
        </el-aside>

        <!--工作区-->
        <el-main class="hgt">
          <!--路由出口-->
          <router-view></router-view>
        </el-main>
      </el-container>

      
    </el-container>

  </div>
</template>

<!--vue 组件选项定义-->
<script>
import { ArrowDown } from "@element-plus/icons-vue";
import LeftNav from "./frame/LeftNav.vue";
import TopNav from './frame/TopNav.vue'
export default {
  data() {
    return {
    };
  },
  components: {
    ArrowDown,
    LeftNav,
    TopNav
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.common-layout {
  background-color: #fff;
}
:deep(.el-header) {
  background-color: #545c64;
}

:deep(.el-aside) {
  background-color: #545c64;
  height: 100%;
}
:deep(.el-main) {
  background-color: #fff;
  border: #f1f1f1 solid 20px;
  border-radius: 10px;
}
.hgt {
  height: 97.9%;
}

/**
  头部样式 
*/
.header {
  color: #fff;
  display: flex; /*   弹性布局*/
  align-items: center; /** 控制容器内的元素  垂直方向的对齐方式 */
  justify-content: flex-end; /** 控制容器内的元素 水平方向的对齐方式 */
}

:deep(.el-dropdown) {
  margin-right: 30px;
}
/**左侧导航  */

.leftnav a {
  display: block;
  width: 196px;
  height: 70px;
  line-height: 70px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  margin: auto;
  text-align: center;
}
</style>
